<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%--
Created by GaoXiang
Date: 2017-05-23 13:40:49 星期二
Version: 1.0
停车场添加页面
--%>
<style>
    .show-fc{
        margin-left:10px;
        margin-top: 10px;
        float: left;
    }
    .uploaded-image{
        /*max-width: 120px;*/
        max-height: 120px;
        position: relative;
        display: inline;
    }
    .uploaded-btn{
        margin-top: 10px;
        height: 120px;
        width: 90px;
    }
    .del-image{
        width: 15px;
        position: relative;
        display: inline;
        right: 25px;
        bottom: 53px;
    }
</style>
<div class="portlet light">

    <div class="portlet-body form">
        <!-- BEGIN FORM-->
        <form action="#" class="form-horizontal" id="save-module">
            <div class="form-body">

                <div class="row">
                    <div class="col-md-6 hide">
                        <div class="form-group">
                            <label class="control-label col-md-3">ID</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" name="id" id="id" value="${longId}" placeholder="默认生成，ID">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">停车场</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" required name="name" placeholder="停车场名称">
                            </div>
                        </div>
                    </div>


                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">所在省</label>
                            <div class="col-md-9">
                                <select name="province" required id="province" class="form-control"  onclick="chooseMarket();">
                                    <option selected value="">选择所在的省份</option>

                                    <c:forEach var="item" items="${provinces}" varStatus="status">
                                        <option value="${item.name}">${item.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">所在市</label>
                            <div class="col-md-9">
                                <select id="market" name="city" required class="form-control"   onclick="chooseArea();"  >
                                    <option selected value="">请选择所在的市</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label  col-md-3">所在区/县</label>
                            <div class="col-md-9">
                                <select name="area" required id="area"  class="form-control">
                                    <option selected value="">请选择所在的区/县</option>
                                </select>
                            </div>
                        </div>
                    </div>


                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">选择停车办</label>
                            <div class="col-md-9">
<c:if test="${type != 8}">
                                <div class="input-group">
                                    <div class="input-icon">
                                        <i class="fa fa-lock fa-fw"></i>
                                </c:if>
                                        <input id="officeId" class="form-control" type="hidden" name="officeId"
                                        <c:if test="${type == 8}"> value="${parkingoffice.id}"</c:if>>
                                        <input type="text" id="officeName" class="form-control" readonly  required name="officeName" placeholder="所属停车办"
                                        <c:if test="${type == 8}"> value="${parkingoffice.name}"</c:if>>
<c:if test="${type != 8}">
                                    </div>

                                    <span class="input-group-btn">
                                        <button id="checkAccount" class="btn btn-success" type="button"  onclick="selectParkingOffice();">
                                        <i class="fa fa-arrow-left fa-fw"></i>  选择停车办
                                    </button>
                                    </span>
                                </div>
    </c:if>
                            </div>
                        </div>
                    </div>



                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">停车场地址</label>
                            <div class="col-md-9">
                                <div class="input-group">
                                    <div class="input-icon">
                                        <i class="fa fa-lock fa-fw"></i>
                                        <input type="text" class="form-control" readonly  required name="address" id="getaddress" placeholder="停车场地址">
                                    </div>
                                    <span class="input-group-btn">
                                        <button class="btn btn-success" type="button" onclick="openMap()">
                                            <i class="fa fa-arrow-left fa-fw"></i>选择地址
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">层数（层）</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control"  required name="floor" id="floor" onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" >
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">经度</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" readonly name="longitude" id="getlng"placeholder="经度">
                            </div>
                        </div>
                    </div>
                </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">纬度</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control"  readonly name="latitude" id="getlat" placeholder="纬度">
                                </div>
                            </div>
                        </div>
                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">联系人</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" required name="contacts" placeholder="联系人">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">联系电话</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" required name="conPhone" id="conPhone"   placeholder="联系电话" onblur="validate_phone(this.id)">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">白天费用</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" required name="deetimeFee" placeholder="白天费用" onkeyup="value=value.replace(/[^\d.]/g,'')">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">晚上费用</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control" required name="nightFee" placeholder="晚上费用" onkeyup="value=value.replace(/[^\d.]/g,'')">
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">开放起始时间</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control bs-time" required name="openStarttime" placeholder="开放起始时间,格式为00:00:00">
                            </div>
                        </div>
                    </div>


                    <div class="col-md-6">
                        <div class="form-group">
                            <label class="control-label col-md-3">开放截止时间</label>
                            <div class="col-md-9">
                                <input type="text" class="form-control bs-time" required name="openStopstime" placeholder="开放截止时间,格式为00:00:00">
                            </div>
                        </div>
                    </div>


                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">免费时长(分钟)</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" required name="charging" placeholder="预约后进门前的免费时长"
                                           onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^0-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label class="control-label col-md-3">备注</label>
                                <div class="col-md-9">
                                    <input type="text" class="form-control" required name="info" placeholder="备注">
                                </div>
                            </div>
                        </div>
                        <input  class="form-control" required name="img"  id="img" type="hidden">
                        <div class="col-md-12" >
                            <div class="col-md-2">
                               <input type="file"  required name="house"  class="hidden"  id="houseFile"/>
                                <button  class="btn btn-success uploaded-btn" type="button"  onclick="$('#houseFile').click();" >
                                    <span class="glyphicon glyphicon-home"></span><br>停车场地图
                                </button>
                            </div>
                            <div class="col-md-10" id="houseImages" ></div>
                        </div>



                </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row">
                            <div class="col-md-offset-3 col-md-9">
                                <button type="button" class="btn green" onclick="save();">保存停车场</button>
                                <button type="button" class="btn default" onclick="layer.close(layer_addModule);">取消</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6"> </div>
                </div>
            </div>
            </div>
        </form>
        <!-- END FORM-->
    </div>
</div>
<!-- script 开始 -->
<script>
    $(function () {
      /* 上传地图*/
        $("#houseFile").fileupload({
            url: "/parking/houseImages",
            dataType: 'json',
            formData: {"parkingId":$("#id").val()},
            add: function (e, data) {
                data.submit();
            },
            done: function (e, data) {
                var result = data.result;
                var image = result.data;
                var imgUrl = image.url;
                var  imgId=image.id;
                console.info("图片的编号"+imgId);
                if (result.success == false) {
                    alert("上传失败");
                } else {
                    document.getElementById('houseImages').innerHTML = '';
                    var div = $("<div class='show-fc' id='divHouse"+imgId+"'>");
                    var img = $("<img  src='/sysImage/showImg?src="+imgUrl+"'class='thumbnail uploaded-image' />");
                    var imgx = $("<img class='del-image' id="+imgId+"  onclick='deleteImage(this.id)' src='/images/deleteLog/deleteImg.png' >");
                    div.append(img).append(imgx);
                    $("#houseImages").append(div);
                    document.getElementById('img').value=imgId;
                }
            },
            progressall: function (e, data) {
            }
        });
    })

    $(function(){
        //初始化页面
        initPage();
    });
    function validate_phone(id) {
        var validatePhone;
        var myReg=/^(0?1[358]\d{9})$|^((0(10|2[1-3]|[3-9]\d{2}))?[1-9]\d{6,7})$/;
        var phone=$.trim($("#"+id).val());
        if(phone !=null && phone !=""){
            if(!myReg.test(phone)){
                layer.msg("请输入正确的联系方式");
                validatePhone=false;
            }else{
                validatePhone=true;
            }
        }else{
            layer.msg("请输入联系方式");
            validatePhone=false;
        }
        return validatePhone;
    }
    function openMap(){
        $.post("/map/baidu", null, function(html){
            window.layer_mapModule = layer.open({
                id:"mapModule",
                type: 1,
                title:"选择地图",
                area:['900px','600px'],
                content: html,
                anim:1,
                shadeClose:false,
                btn:["确定","取消"],
                yes:function(){
                    $("#getlng").val($("#lng").val());
                    $("#getlat").val($("#lat").val());
                    $("#getaddress").val($("#address").val())
                    layer.close(layer_mapModule);
                },
                btn2:function(){},
                cancel: function(){}
            });
        });
    }
    function  chooseMarket() {
        var options=$("#province option:selected");
        if(options.text()!="选择所在的省份"){
            $.post("/city/chooseMarket",{"name":options.val()},function (data) {
                for(var i=0; i<data.length; i++){
                    $("#market").append('<option value="' + data[i].name + '">' + data[i].name + '</option>')
                };
                var name=data[0].name;
                defaultNext(name);
            });

        }

        $("#market").empty();
        $("#area").empty();
    }
    function chooseArea() {
        var options=$("#market option:selected");
        if(options.text()!="请选择所在的市"){
            $.post("/city/chooseArea",{"name":options.val()},function (data) {
                for(var i=0; i<data.length; i++){
                    $("#area").append('<option value="' + data[i].name + '">' + data[i].name + '</option>')
                };
            });
        }
        $("#area").empty();
    }

    function defaultNext(name) {
        $.post("/city/defaultNext",{"name":name},function (data) {
            for(var i=0; i<data.length; i++){
                $("#area").append('<option value="' + data[i].name + '">' + data[i].name + '</option>')
            };
        });
        $("#area").empty();
    }
    /**
     * 保存停车场
     */
    function save(){
        var param = tools.formParams("save-module");
        if(tools.valid("save-module")){
            tools.post("/parking/save",param,function(data){
                if(data.success){
                    layer.msg('停车场保存成功', {icon: 1,time:1000},function(){
                        //刷新列表页面
                        toPage(null);
                        //关闭弹窗
                        layer.close(layer_addModule);
                    });
                }else{
                    tools.errorTip(data.code,data.data);
                }
            });
        }
    }
    /**
     * 点击删除图标删除指定的图标
     */
    function deleteImage(id) {
        alert(id);
        $.post("/parking/deleteImage",{"id":id},null);
        $("#divHouse"+id).remove();
    }

    /**
     * 2017年6月6日  闫增宝  选择停车办
     */
    function selectParkingOffice(){
        $.post("/parkingoffice/chooseParkingoffice",null,function(html){
            window.layer_resModule = layer.open({
                id:"resModule",
                type: 1,
                title:"选择停车办",
                area:['900px','600px'],
                content: html,
                anim:1,
                shadeClose:false,
                cancel: function(){}
            });

        });
    }


</script>
<!-- script 结束 -->